.fx-form {
  background-color: $form-background;
  padding: 20px;
}

.fx-form-item {
  display: flex;
  padding-bottom: 20px;
  color: $font-color-important;

  &.left {
    align-items: center;

    > span {
      text-align: left;
    }
  }

  &.right {
    align-items: center;

    > span {
      text-align: right;
    }
  }

  &.top {
    flex-direction: column;
  }

  > span {
    height: $height-default;
    line-height: $height-default;
    display: inline-block;
    box-sizing: border-box;
    @extend .text_hide;
  }

  > .fx-form-item-content {
    position: relative;
    padding-left: 10px;

    > .rules-error {
      height: 20px;
      line-height: 20px;
      position: absolute;
      bottom: 0;
      left: 0;
      color: $color-error;
      transform-origin: center top;
      transform: translateY(100%) scaleY(1);

      &.fade-enter-active,
      &.fade-leave-active {
        transition: all 0.2s;
      }

      &.fade-enter-from,
      &.fade-leave-to {
        transform: translateY(100%) scaleY(0);
        opacity: 0;
      }
    }
  }
}
